<template>
  <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <div class="product__item__nodata" v-if="waterList.length == 0 && productList.length == 0">
      暂无数据
    </div>
    <div class="product__item" v-for="item in waterList">
      <div class="product__item__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}">
        <div class="product__item__type">
          本厂
        </div>
      </div>
      <div class="product__item__info">
        <div class="product__item__name">{{item.waterName}}</div>
        <div class="product__item__sell">销量：{{item.sales}}&nbsp;&nbsp;&nbsp;库存：{{item.stock}}</div>
        <div class="product__item__price">￥{{item.price}}</div>
      </div>
      <div class="product__item__control">
        <div class="product__item__control__edit">
          <!-- <van-icon name="edit" @click="edit(item)"></van-icon> -->
          <van-icon name="delete" @click="del(item)"></van-icon>
        </div>
        <div class="product__item__control__check">
          <van-button size="mini" plain type="info" v-if="item.verify == 1 && item.state == 0"
            @click="changeState(item)">上架</van-button>
          <van-button size="mini" plain v-if="item.verify == 1 && item.state == 1" @click="changeState(item)">下架
          </van-button>
          <div v-if="item.verify == 2" class="product__item__verify__checking">
            审核中
          </div>
          <div v-if="item.verify == 0" class="product__item__verify__uncheck">
            未通过
          </div>
        </div>
      </div>
    </div>
    <div class="product__item" v-for="(item, index) in productList">
      <div class="product__item__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}">
        <div class="product__item__type" v-bind:class="'type' + item.own">
          {{item.own ? '自营' : '其他'}}
        </div>
      </div>
      <div class="product__item__info">
        <div class="product__item__name">{{item.name}}</div>
        <div class="product__item__sell">销量：{{item.sales}}&nbsp;&nbsp;&nbsp;库存：{{item.stock}}</div>
        <div class="product__item__price">￥{{item.price}}</div>
      </div>
      <div class="product__item__control">
        <div class="product__item__control__edit">
          <van-icon name="edit" v-if="!(item.verify == 2)" @click="edit(item)"></van-icon>
          <van-icon name="delete" @click="del(item, index)"></van-icon>
        </div>
        <div class="product__item__control__check">
          <van-button size="mini" plain type="info" v-if="item.verify == 1 && item.state == 0"
            @click="changeState(item)">上架</van-button>
          <van-button size="mini" plain v-if="item.verify == 1 && item.state == 1" @click="changeState(item)">下架
          </van-button>
          <div v-if="item.verify == 2" class="product__item__verify__checking">
            审核中
          </div>
          <div v-if="item.verify == 0" class="product__item__verify__uncheck">
            未通过
          </div>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
  import {
    PRODUCT_LIST,
    PRODUCT_ADD,
    PRODUCT_EDIT,
    PRODUCT_CHANGE_STATE,
    PRODUCT_DEL
  } from '@/api/product'
  import {
    mapState
  } from 'vuex'
  export default {
    props: {
      own: {
        type: Number
      }
    },
    data() {
      return {
        refreshLoading: false,
        productList: [],
        waterList: [],
        currPage: 1,
        pageSize: 5
      }
    },
    mounted() {
      this.getList();
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    methods: {
      //获取列表
      getList() {
        let params = {
            stationId: this.stationInfo.id
          },
          paramStr = [];
        //本厂，自营，其他水厂查询条件
        //0 其他水厂商品，1 配送站商品，2 水厂本身商品，不传则查询所有商品
        if (this.own !== undefined) {
          params.own = this.own;
        }
        for (var i in params) {
          paramStr.push(i + '=' + params[i])
        }
        this.$reqPost(PRODUCT_LIST + '?' + paramStr.join('&')).then(res => {
          this.refreshLoading = false;
          this.productList = res.data.productList;
          this.waterList = res.data.waterList;
          if (this.own == 2 || this.own == undefined) {
            if (res.data.waterList.length == 0) {
              this.$dialog.confirm({
                title: '提示',
                message: '暂无水厂商品，前往提交审核？若不申请水厂商品将无法正常营业。'
              }).then(() => {
                // on confirm
                this.$router.push('/productApproval')
              }).catch(() => {
                // on cancel
              });
            } else {
              const hasVerify = res.data.waterList.filter(el => {
                return el.verify == 1
              })
              const hasPalou = res.data.productList.filter(el => {
                return el.deliver == 1
              })
              if (hasVerify.length !== 0 && hasPalou.length === 0 && this.own != 2 && this.own != 0) {
                this.$dialog.confirm({
                  title: '提示',
                  message: '水厂商品已审核通过，是否添加爬楼费？若不配置爬楼费，用户下单将不支付爬楼费。'
                }).then(() => {
                  // on confirm
                  this.$router.push({
                    path: '/palouAdd',
                    query: {
                      palou: 1
                    }
                  })
                }).catch(() => {
                  // on cancel
                });
              }
            }
          }

        })
      },
      //刷新
      onRefresh() {
        this.refreshLoading = true;
        this.getList();
      },
      //编辑
      edit(item) {
        if (item.own == 0 || item.own == 1) {
          if (item.deliver == 1) {
            this.$router.push({
              name: 'palouEdit',
              params: {
                id: item.id,
                own: item.own
              }
            })
          } else {
            this.$router.push({
              name: 'productEdit',
              params: {
                id: item.id,
                own: item.own
              }
            })
          }
          
        } else {

        }
      },
      //删除
      del(item, index) {
        this.$dialog.confirm({
          title: '提示',
          message: '确认删除？'
        }).then(() => {
          this.$reqGet(PRODUCT_DEL, {
            productId: item.id,
            own: item.own || 2 //没有则为水厂商品own为2
          }).then(res => {
            if (item.own == 1 || item.own == 0) {
              this.productList.splice(index, 1);
            } else {
              this.waterList.splice(index, 1);
            }
            this.$emit('afterDel');
            this.$toast.success('删除成功');
          });
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
      //上架下架
      changeState(item) {
        let params = {};
        //判断水厂
        if (item.own == undefined) {
          params.productId = item.waterId;
        } else {
          params.productId = item.id;
        }
        params.state = item.state ? 0 : 1;
        params.own = item.own == undefined ? 2 : item.own;
        params.stationId = this.stationInfo.id;

        this.$reqGet(PRODUCT_CHANGE_STATE, params).then(res => {
          if (res.data == 1) {
            if (item.state == 1) {
              this.$toast.success('下架成功')
              item.state = 0;
            } else {
              this.$toast.success('上架成功')
              item.state = 1;
            }
          } else {
            this.$toast.success('操作失败')
          }
        });
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../styles/variable.less';

  .product__item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;

    .product__item__img {
      flex: 0 0 90px;
      background: url('../assets/product.png') center;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .product__item__info {
      flex: 1;
      margin: 0 10px;

      .product__item__name {
        font-size: 18px;
        color: #666;
      }

      .product__item__sell {
        font-size: 12px;
        color: #999;
        margin: 5px 0;
      }

      .product__item__price {
        color: @col-the;
      }
    }
  }

  .product__item__control {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    .product__item__control__edit {
      i {
        font-size: 22px;
      }

      .van-icon-edit {
        margin-right: 10px;
        color: #4fce2f;
      }

      .van-icon-delete {
        color: #ff0000;
      }
    }

    .product__item__control__check {
      .product__item__verify__checking {
        color: @col-yellow;
      }

      .product__item__verify__uncheck {
        color: @col-gray;
      }
    }
  }

  .product__item__type {
    display: inline-block;
    margin: 2px 0 0 2px;
    padding: 2px 3px;
    background: @col-the;
    color: #ffffff;
    font-size: 10px;

    &.type0 {
      background-color: #e7d31c;
    }

    &.type1 {
      background-color: #4fce2f;
    }
  }

  .product__item__nodata {
    text-align: center;
    color: #999;
    margin: 10px 0;
  }

</style>
